作品 Demo 連結: 傳送門

作品目標：點選畫面欄位會動畫式展開，並有文字向中心靠齊
難易度：★☆☆☆☆

HTML

<div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
</div>

CSS 於此列出有關動畫和 Flex 的部分

.panels {
    // ...略
    display: flex;
}

.panel {
  // ...略
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.panel > * {
    // ...略
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel > *:first-child{ transform: translateY(-100%); }
.panel.open-active > *:first-child{ transform: translateY(0); }
.panel > *:last-child{ transform: translateY(100%); }
.panel.open-active > *:last-child{ transform: translateY(0); }

.panel.open {
    flex: 5;
    font-size:40px;
}

其實這次作者似乎是把重心放在 CSS 的 Flex 之上
但 Flex 並不是我們這次的重點
有興趣的可以上網爬爬文 =)

【第一步：綁定事件】

const panels = document.querySelectorAll('.panel');

panels.forEach(panel => panel.addEventListener('click', toggleOpen));
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

這次打算裡用增刪 class 來使用 transition 的動畫效果
總共有兩個功能性的 class:
1. .open：加大寬度和放大字體
2. .open-active：上下的字滑入

我們就先綁定 click 事件，點擊之後自動增刪 .open 這個 class
之後再綁定 transitionend 事件，在 .open 的過渡效果結束後在讓上下字體滑入

【第二步：撰寫】

function toggleOpen(){
  this.classList.toggle('open');
}

function toggleActive(e){
    if(e.propertyName.includes('flex'))
        this.classList.toggle('open-active');
}

在這裡我們會接觸到新的 .classList !
.classList 最常用的會有三種功能
1. .add()
2. .remove()
3. .toggle()

是不是很眼熟!?
沒錯，其實就是 jQuery 裏頭的
addClass(), removeClass(), toggleClass()
這一家人!!

而第二步驟則是先判斷 是否有屬性名稱有包含 flex
有的話則執行 .toggle()

今天的內容有點簡短，終於可以不用那麼趕了~

LEVEL UP!!!